import React, { memo, useState, useMemo } from 'react';
import { Layout, Menu } from 'antd';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import { Link } from 'umi';
import './index.less';
import { useSelector, shallowEqual } from 'react-redux';
import golbalConfig from '@/config';

const { SubMenu } = Menu;
const { Header, Sider, Content, Footer } = Layout;
const { footerText } = golbalConfig;

export default memo(function AdminLayout(props) {
  // 折叠----设置状态
  const [collapsed, setCollapsed] = useState(false);

  // 菜单列表----避免重复渲染
  const { userMenuList } = useSelector(
    (state) => ({
      userMenuList: state.global.userMenuList,
    }),
    shallowEqual,
  );

  // const reslut = useMemo(() => {
  const res = (userMenuList || []).filter((item) => item.menuStatus != -1);
  const firstMenuData = res.filter((item) => item.menuParentId == -1);
  const reslut = firstMenuData.map((itemIn) => {
    return {
      ...itemIn,
      children: res.filter((item) => item.menuParentId == itemIn.id),
    };
  });
  // }, [userMenuList])

  return (
    <Layout>
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        style={{ overflow: 'auto', height: '100vh' }}
      >
        <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
          {reslut.map(({ id, menuName, menuPath, children }) => {
            return (
              <SubMenu key={id} title={menuName}>
                {children.map(({ id, menuName, menuPath }) => {
                  return (
                    <Menu.Item key={id}>
                      <Link to={`/administrators/admin${menuPath}`}>
                        {menuName}
                      </Link>
                    </Menu.Item>
                  );
                })}
              </SubMenu>
            );
          })}
        </Menu>
      </Sider>
      <Layout className="admin-site-layout">
        <Header style={{ padding: 0, background: '#fff' }}>
          <span
            className="admin-trigger"
            onClick={() => setCollapsed(!collapsed)}
          >
            {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          </span>
        </Header>
        <Content className="admin-layout-content">
          {/*局部路由切换实现*/}
          {props.children}
          {/*局部路由切换实现*/}
        </Content>
        {footerText ? (
          <Footer style={{ textAlign: 'center' }}><a>{footerText}</a></Footer>
        ) : null}
      </Layout>
    </Layout>
  );
});
